<!DOCTYPE html >
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="../../favicon.ico">
		<title>TCP聊天室</title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			.talk_con {
				width: 100%;
				height: 100%;
				margin: 50px auto 0;
				background: #f9f9f9;
			}
			
			.talk_show {
				width: 100%;
				height: 500px;
				background: #fff;
				margin: 10px auto 0;
				overflow: auto;
			}
			
			.talk_input {
				width: 100%;
				margin: 10px auto 0;
			}
			
			.whotalk {
				width: 9%;
				height: 30px;
				float: left;
				outline: none;
			}
			
			.talk_word {
				width: 80%;
				float: left;
				outline: none;
				text-indent: 10px;
				margin-left: 1%;
			}
			
			.talk_sub {
				width: 9%;
				height: 30px;
				float: left;
				margin-left: 1%;
			}
			
			.atalk {
				margin: 10px;
			}
			
			.atalk span {
				display: inline-block;
				background: #0181cc;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
			
			.btalk {
				margin: 10px;
				text-align: right;
			}
			
			.btalk span {
				display: inline-block;
				background: #ef8201;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
			
			.selectLi {}
		</style>

		<script type="text/javascript">
			var received_msg;
			var ws;
			var SocketCreated = false;
			// 定义webSocket的url
			var webSocketUrl = "ws://localhost:8080/chatSocket";
            var toUser;
            var groupChat="groupChat-";
			$(function() {
			    // 好友列表
				$(".showFriend").each(function() {
					$(this).click(function() {
						$("#chatPanel").removeAttr("hidden");
						$("#userInfoPanel").attr("hidden","hidden");
						$("#font1").text($(this).text());
                        toUser = $(this).text().trim();
						$("#words").html("");
					});
				});

				// 通讯录
				$("#friendList").click(function () {
                    location.reload();
                });

                // 群组列表
                $(".showGroupMember").each(function() {
                    $(this).click(function() {
                        $("#chatPanel").removeAttr("hidden");
                        $("#userInfoPanel").attr("hidden","hidden");
                        $("#font1").text($(this).text());
                        toUser = $(this).text().trim();
                        $("#words").html("");
                    });
                });


				$("#headPic").click(function() {
					$("#userInfoPanel").removeAttr("hidden");
					$("#chatPanel").attr("hidden","hidden");
				});
			});

			window.onload = function() {
			    // 界面加载的时候发送webSocket请求
                if(SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
                    SocketCreated = false;
                    ws.close();
                } else {
                    try {
                        if("WebSocket" in window) {
                            ws = new WebSocket(webSocketUrl);
                        } else if("MozWebSocket" in window) {
                            ws = new MozWebSocket(webSocketUrl);
                        } else {
                            // 浏览器不支持 WebSocket
                            alert("您的浏览器不支持 WebSocket!");
                        }
                        SocketCreated = true;
                    } catch(ex) {
                        alert(ex);
                        return;
                    }
                }

				var Words = document.getElementById("words");
				// 建立socket链接
                // 获取用户名
                var user = $("#user").val();
                //定义空字符串
                var str = "";

				// 接收到消息
                ws.onmessage = function(evt) {
                    received_msg = evt.data;
                    var Info = received_msg.split(",");
                    var msg_Info = Info[2].split(":");
                    var toUserInfo = Info[1].split(":");
                    var toUser = toUserInfo[1];
                    var userInfo = Info[0].split(":");
					var fromUser = userInfo[1];

                    // 文件
                    if(msg_Info[0]=="getFile") {
                        if(toUser == user) {
                            var filePath = msg_Info[1];
                            var filename = filePath.substr(filePath.lastIndexOf("/")+1);
                            str = '<div class="atalk"><span>'+fromUser+":"+'<a id="getFile" href="" style="color: red" ">收到文件：' + filename + '，点击下载</a></span></div>';
                            Words.innerHTML = Words.innerHTML + str;
                            $("#getFile").attr("href",msg_Info[1]);
                            $("#getFile").removeAttr("id");
                        }
                    }

					// 图片
                    if(msg_Info[0]=="getPic") {
                        if(toUser == user) {
                            str = '<div class="atalk"><span>'+fromUser+":"+'<img id="getPic" src="" style="width: 145px;hight:145px" alt="这是图片" class="img-thumbnail"/></span></div>';
                            Words.innerHTML = Words.innerHTML + str;
                            $("#getPic").attr("src",msg_Info[1]);
                            $("#getPic").removeAttr("id");
                        }
                    }

					// 文本
					if(msg_Info[0]=="text") {
                        if(toUser == user) {
                            str = '<div class="atalk"><span>'+fromUser+":"+ msg_Info[1] + '</span></div>';
                            Words.innerHTML = Words.innerHTML + str;
                        }
					}
                    Info = null;
                    msg_Info = null;
                    toUserInfo = null;
                    toUser = null;
                };

				// 发送文本
                $("#talksub").click(function () {
                    if($("#talkwords").val() == "") {
                        // 消息为空时弹窗
                        alert("消息不能为空");
                        return;
                    }
                    str = '<div class="btalk"><span> '+ user+':' + $("#talkwords").val() + '</span></div>';
                    // 拼接信息
                    var msg = "user:"+user+",toUser:"+toUser+",text:"+ $("#talkwords").val();
                    ws.send(msg);
                    $("#talkwords").val("");
                    // 将之前的内容与要发的内容拼接好 提交
                    Words.innerHTML = Words.innerHTML + str;
                });

                // 发送图片(二进制文件)
                $("#talkpicsub").click(function () {
                    var inputElement = document.getElementById('talkpic');
                    var file = inputElement.files[0];
                    var picName = file.name;
                    var type = picName.substr(picName.lastIndexOf(".")+1).trim();
                    if(type=="jpg" || type == "png"||type == "bmp"||type=="jpeg") {
                        var blob = new Blob([file],{type:"text/plain"});
                        var reader = new FileReader();
                        reader.readAsArrayBuffer(blob);
                        reader.onload = function (evt) {
                            var binaryString = evt.target.result;
                            //发送文件
                            ws.send("user:"+user+",toUser:"+toUser+",picName:"+picName);
                            ws.send(binaryString);
                            var str = '<div class="btalk"><span> '+ user+':' + picName + '</span></div>';
                            // 将之前的内容与要发的内容拼接好 提交
                            Words.innerHTML = Words.innerHTML + str;
                        }
                        $("#talkpic").val("");
					}else {
                        alert("图片格式有误");
                        return;
					}
                });

                $("#talkfilesub").click(function () {
                    var inputElement = document.getElementById('talkfile');
                    var file = inputElement.files[0];
                    var fileName = file.name;
                    var reader = new FileReader();
                    //以二进制流的方式读取第一个文件
                    reader.readAsArrayBuffer(file);  //以二进制形式读取文件
                    //文件读取完毕后该函数响应
                    reader.onload = function (evt) {
                        var binaryString = evt.target.result;
                        //发送文件
                        ws.send("user:"+user+",toUser:"+toUser+",fileName:"+fileName);
                        ws.send(binaryString);
                        var str = '<div class="btalk"><span> '+ user+':' + fileName + '</span></div>';
                        // 将之前的内容与要发的内容拼接好 提交
                        Words.innerHTML = Words.innerHTML + str;
                    }
                    $("#talkfile").val("");
                });
			}

		</script>

		<script type="text/javascript">
			$(function () {
                // 编辑个人信息
                var name;
                var sex;
                var address;
                var birth;
                var phone;
                $("#updateUserInfoBtn").click(function() {
                    // 补全信息
                    name = $("#userNameSpan").text();
					sex = $("#userSexSpan").text();
					address = $("#userAddressSpan").text();
					birth = $("#userBirthSpan").text();
					phone = $("#userPhoneSpan").text();
                    $("#name").val(name);
                    if(sex == "男") {
                        $("#manLabel").addClass("active");
                        $("#man").attr("checked","checked");
					}else {
                        $("#womenLabel").addClass("active");
                        $("#women").attr("checked","checked");
					}
                    $("#address").val(address);
                    $("#birth").val(birth);
                    $("#phone").val(phone);
                    $("#updateUserInfoModal").modal("show");
                });
                
                $("#sureUpdateUserInfo").click(function () {
                    name = $("#name").val();
                    sex = $("#sex").val();
                    alert(sex);
                    address = $("#address").val();
                    birth = $("#birth").val();
                    phone = $("#phone").val();

					$.post(
					    "/information/updateInformation",
						{
                            name:name,
							sex:sex,
							address:address,
                            birthDate:birth,
							phone:phone
						},
						function () {
                            $("#updateUserInfoModal").modal("hide");
                        },
						"json"
					);
                });
            })

		</script>

		<script type="text/javascript">
            $(function () {
                // 修改密码
                $("#updatePassBtn").click(function() {
                    $(".errorUpdatePass").each(function () {
                        $(this).remove();
                    });
                    $("#oldPasswordSpan").val("");
                    $(".successUpdatePass").remove();
                    $("#updatePassModal").modal("show");
                });

                // 验证旧密码
                $("#oldPassword").blur(function () {
                    var oldpass = $(this).val();
                    var name = $("#user").val();
                    $.post(
                        "/user/surePass",
                        {
                            name:name,
                            password:oldpass
                        },
                        function (msg) {
                            if(msg.state == "error") {
                                // 验证失败
                                $("#oldPasswordSpan").html("<font class='errorUpdatePass' style='color: red;margin-left: 4%'>密码错误</font>");
                            }else {
                                // 验证成功
                                $("#oldPasswordSpan").html("<font class='successUpdatePass' style='color: green;margin-left: 4%'>验证成功</font>");
                            }
                        },
                        "json"
                    );
                });
                $("#newPassword").blur(function() {
                    if($(this).val() == "") {
                        $("#newPasswordSpan").html("<font id='f1' class='errorUpdatePass' style='color: red;margin-left: 4%'>密码不能为空</font>");
                    }else{
                        $("#f1").remove();
                    }
                });
                $("#reNewPassword").blur(function() {
                    var password = $("#newPassword").val();
                    var rePassword = $(this).val();
                    if(password != rePassword) {
                        $("#reNewPasswordSpan").html("<font id='f2' class='errorUpdatePass' style='color: red;margin-left: 4%'>两次密码不一致</font>");
                    }else if(rePassword == "") {
                        $("#reNewPasswordSpan").html("<font id='f2' class='errorUpdatePass' style='color: red;margin-left: 4%'>密码不能为空</font>");
                    }else{
                        $("#f2").remove();
                    }
                });

                $("#sureUpdatePass").click(function () {
                    $(".form-control").each(function () {
                        $(this).blur();
                    });
                    var flag = false;
                    $(".errorUpdatePass").each(function () {
                        if($(this).text() != null){
                            flag = true;
                        }
                    });
                    if(!flag) {
                        var name = $("#user").val();
                        var passWord = $("#newPassword").val();
                        $.post(
                            "/user/updatePassWord",
                            {
                                name:name,
                                passWord:passWord
                            },
                            function (msg) {
                                if(msg){
                                    $("#updatePassModal").modal("hide");
                                    $("#oldPassword").val("");
                                    $("#newPassword").val("");
                                    $("#reNewPassword").val("");
                                }
                            },
                            "json"
                        );
                    }
                });
            })

		</script>

		<script type="text/javascript">
			$(function () {
				$("#searchFriend").blur(function () {
				    var name = $(this).val();
					$.post(
						"/user/getUserByName",
						{
						    name:name
						},
						function (msg) {
							if(msg.state == "success") {
                                $("#chatPanel").removeAttr("hidden");
                                $("#userInfoPanel").attr("hidden","hidden");
                                $("#font1").text(msg.user.name);
                                $("#words").html("");
							} else {
                                alert("你没有该好友！");
							}
                        },
						"json"
					);
                });
            })
		</script>

		<script type="text/javascript">
			$(function () {
                // 添加好友
                $("#addBtn").click(function() {
                    $("#addFriend").html();
                    $("#addFriendDiv").attr("hidden","hidden");
                    $("#addModal").modal("show");
                    $("#errorDiv").attr("hidden","hidden");
				});
                $("#selectUser").click(function () {
                    var addName = $("#addName").val();
                    $.post(
                        "/user/getUserByName",
						{ name:addName },
						function(msg){
                            if(msg.state != "error") {
                                $("#addFriendDiv").removeAttr("hidden");
                                $("#errorDiv").attr("hidden","hidden");
                                $("#addFriend").html(msg.user.name);
							}else {
								$("#errorDiv").removeAttr("hidden");
                                $("#addFriendDiv").attr("hidden","hidden");
							}
                    	},
						"json"
					);
                });

                $("#addFriend").click(function () {
                    var userId = $("#userId").val();
                    var addName = $("#addName").val();
                    $.post(
                        "/friends/addFriend",
                        {
                            userId:userId,
							name:addName
						},
                        function(msg){
                            if(msg == true) {
                                $("#addModal").modal("hide");
                            }else {
								$("#isFriend").html("<font style='color: red'>你们已经是好友咯！不可以重复添加了</font>");
                                $("#errorDiv").attr("hidden","hidden");
							}
                        },
                        "json"
                    );
                });
            })
		</script>

		<script type="text/javascript">
			// 搜索群聊
			$(function () {
			    // 群组名
                var groupName;
                var groupMember = "";
				$("#addGroupBtn").click(function () {
                    $("#addGroup").html();
                    $("#addGroupDiv").attr("hidden","hidden");
                    $("#addGroupModal").modal("show");
                    $("#errorGroupDiv").attr("hidden","hidden");
                });
				$("#selectGroup").click(function () {
				    var groupName = $("#addGroupName").val();
					$.post(
					    "/group/searchGroupByName",
						{
                            groupName:groupName
						},
						function (msg) {
					        if(msg){
                                if(msg.state != "error") {
                                    $("#addGroupDiv").removeAttr("hidden");
                                    $("#addGroup").html(msg.group.name);
                                    $("#errorGroupDiv").attr("hidden","hidden");
                                }else {
                                    $("#errorGroupDiv").removeAttr("hidden");
                                    $("#addGroupDiv").attr("hidden","hidden");z
                                }
							}
                        },
						"json"
					);
                });
				// 加入群聊
                $("#addGroup").click(function () {
                    var name = $("#user").val();
                    var groupName = $("#addGroupName").val();
                    $.post(
                        "/group/addGroup",
                        {
                            name:name,
                            groupName:groupName
                        },
                        function(msg){
                            alert(msg);
                            if(msg == true) {
                                $("#addGroupModal").modal("hide");
                            }else {
                                $("#isGroup").html("<font style='color: red'>你已经是群成员咯！不可以重复添加了</font>");
                            }
                        },
                        "json"
                    );
                });
				// 搜索群组列表
				$("#groupList").click(function () {
				    var name = $("#user").val();
					$.post(
					    "/group/getGroupList",
						{
						    name:name
						},
						function (msg) {
							if(msg==null) {
							    alert("你还没有加入任何群组！");
							}else {
							    // 添加node之前删除原来的node
                                $("#showGroupList table tr").each(function () {
                                    $(this).remove();
                                });
                                // 添加节点
                                $(msg).each(function (n,j) {
                                    $("#showGroupList table").append('<tr class="list-group-item showGroup"><td>'+j+'</td></tr>');
                                });

                                $("#showFriendList").attr("hidden","hidden");
                                $("#showGroupList").removeAttr("hidden");
                                $("#showGroupMemberList").attr("hidden","hidden");
                                $("#testModal").modal("show");

                                // 群组列表
                                $(".showGroup").each(function(n, i) {
                                    $(this).click(function() {
                                        $("#chatPanel").removeAttr("hidden");
                                        $("#userInfoPanel").attr("hidden","hidden");
                                        $("#font1").text($(this).text());
                                        groupName = $(this).text();
                                        $.post(
                                            "/group/getMemberList",
                                            {
                                                groupName:groupName
                                            },
                                            function (msg) {
                                                if(msg != null) {
                                                    $(msg).each(function (i,n) {
                                                        if(n!=undefined) {
                                                            groupMember += "-" + n ;
														}
                                                    });
                                                }
                                                toUser = groupChat + groupMember;
                                            },
                                            "json"
                                        );
                                        $("#groupMember").removeClass("hidden");
                                        $("#words").html("");
                                    });
                                });
                            }
                        },
						"json"
					);
                });

                // 搜索群成员列表
                $("#groupMember").click(function () {
                    $.post(
                        "/group/getMemberList",
                        {
                            groupName:groupName
                        },
                        function (msg) {
                            if(msg != null) {
                                // 添加node之前删除原来的node
                                $(".ulGroupMember li").each(function () {
                                    $(this).remove();
                                });

                                $(msg).each(function (i,n) {
                                    $(".ulGroupMember").append('<li><input id="groupMemberName" type="button" class="form-control btn-info" /></li>');
                                    $("#groupMemberName").val(n);
                                    $("#groupMemberName").removeAttr("id");
                                });
                            }
                        },
                        "json"
                    );
                });

            });
		</script>

		<!-- 页面的title图片 -->
		<link rel="icon" sizes="192x192" href="//res.wx.qq.com/a/wx_fed/webwx/res/static/img/qMUjOdv.png" type="image/png" />
	</head>

	<body>
		<input id="user" hidden th:value="${user.name}">
		<input id="userId" hidden th:value="${user.id}">
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
					<a class="navbar-brand" href="#">TCP聊天室</a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="/user/signin">signin</a>
						</li>
						<li>
							<a href="/user/signup">signup</a>
						</li>
					</ul>
					<form class="navbar-form navbar-right">
						<input type="text" id="searchFriend" class="form-control" placeholder="输入你的好友名称" data-dismiss="alert" aria-label="Close">
					</form>
				</div>
			</div>
		</nav>
		<div class="container-fluid" style="background-image: url(http://www.theskiptapp.com/wp-content/uploads/2016/04/header-app-image.jpg);background-color:#091827;padding-top: 100px;padding-bottom: 600px;">

			<div class="row">
				<div class="col-sm-1 col-md-1  col-lg-1" style="margin-left: 16%;">
					<img id="headPic" src="/img/head.png" style="width: 145px;hight:129px"  alt="这是头像" class="img-circle" >
				</div>
				
				<div class="col-sm-8 col-md-8  col-lg-8 ">
					<h3 class="special-heading-1 md-responsive-text-40 visible-sm-*" style="font-size:55px;color:#ffffff;margin-bottom:1%;margin-left: 15%;">欢迎进入<strong>TCP</strong>网页聊天室</h3>
					<p class="visible-sm-*" style="font-size:15px;color:#ffffff;margin-bottom:20px;margin-left: 15%;">———————————本聊天室页面基于BootStrap实现，底层代码使用TCP/IP协议实现</p>
				</div>
			</div>
			<br />
			<div class="row" style="margin-left: 0.5%;">
				<div class="col-sm-2 col-md-2  col-lg-2 sidebar" style="border-image-transform: none;margin-left: 12%;">

					<ul class="nav nav-tabs nav-justified">
						
						<li role="presentation" class="active">
							<button type="button" id="friendList" class="btn btn-default glyphicon glyphicon-user  col-sm-5 col-md-5  col-lg-5" aria-label="Left Align">
								通讯录
							</button>
							<button class="btn btn-default col-sm-2 col-md-2  col-lg-2 glyphicon glyphicon-plus" style="margin-left: 1px;margin-bottom: 1px" id="addBtn" type="button" tabindex="-1" role="dialog" data-target="#addModal"></button>
							<button class="btn btn-default col-sm-2 col-md-2  col-lg-2 glyphicon glyphicon-globe" style="margin-left: 1px;margin-bottom: 1px" id="groupList" type="button"></button>
							<button class="btn btn-default col-sm-2 col-md-2  col-lg-2 glyphicon glyphicon-home" style="margin-left: 1px;margin-bottom: 1px" id="addGroupBtn" type="button" tabindex="-1" role="dialog" data-target="#addGroupModal"></button>
						</li>
						<br />
						<div id="showFriendList" class="list-group col-sm-12 col-md-12  col-lg-12">
							<table class="list-group col-sm-12 col-md-12  col-lg-12 table-hover">
								<tr class="list-group-item showFriend" th:each="friends: ${user.friends}">
									<td th:text="${friends.name}" />
								</tr>
							</table>
						</div>

						<div id="showGroupList" hidden="hidden" class="list-group col-sm-12 col-md-12  col-lg-12">
							<table class="list-group col-sm-12 col-md-12  col-lg-12 table-hover">
							</table>
						</div>
					</ul>
				</div>
				<div class="col-sm-6 col-md-6 col-lg-6 main">
					<div id="chatPanel" class="panel panel-info" hidden>
						<div class="panel-heading">
							<font id="font1" style="margin-left: 45%;color: #000000;">咖妃</font>
							<div class="btn-group dropdown pull-right">
								<button type="button" id="groupMember"  class=" hidden"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<span aria-hidden="true" class="glyphicon glyphicon-sunglasses"></span>
								</button>
								<ul class="dropdown-menu ulGroupMember">
								</ul>
							</div>

						</div>
						<div class="talk_con">
							<div class="talk_show" id="words">
								<div class="atalk"><span id="asay">A说:吃饭了吗？</span></div>
								<div class="btalk"><span id="bsay">B说:还没呢，你呢？</span></div>
							</div>
							<div class="talk_input">
								<div class="row">
									<div class="col-lg-12" style="margin-left: 1%">
										<div class="btn-group dropup">
											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
											</button>
											<ul class="dropdown-menu">
												<li><input type="file" class="form-control" id="talkpic" value="图片"></li>
												<li><button class="btn btn-info center-block col-sm-12 col-md-12 col-lg-12" type="button" id="talkpicsub"> 发送 </button></li>
											</ul>
										</div>
										<div class="btn-group dropup">
											<form id="talkfileform" method="post" enctype="multipart/form-data">
												<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
												</button>
												<ul class="dropdown-menu">
													<li><input type="file" class="form-control" id="talkfile" ></li>
													<li><button class="btn btn-info center-block col-sm-12 col-md-12 col-lg-12" type="button" id="talkfilesub" > 发送 </button></li>
												</ul>
											</form>
										</div>
										<!--语音按钮-->
										<!--<div class="btn-group dropup">
											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
											</button>
											<ul class="dropdown-menu">
												<li><input type="file" multiple class="form-control" id="talkvoice" ></li>
												<li><button class="btn btn-info center-block col-sm-12 col-md-12 col-lg-12" type="button" id="talkvoicesub"> 发送 </button></li>
											</ul>
										</div>-->
									</div>
								</div>
								<div class="row">
									<div class="col-lg-12">
										<div class="input-group">
											<input type="text" class="form-control talk_word" id="talkwords" placeholder="请输入你想要发送的内容！">
											<span class="input-group-btn">
								        		<button class="btn btn-info" type="button" id="talksub"> 发送 </button>
								      		</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="col-sm-4 col-md-4 col-lg-4 main">
					<div id="userInfoPanel" class="panel panel-info" hidden>
						<div class="panel-heading">
							<font id="fontInfo" style="margin-left: 45%;color: #000000;">详细信息</font>
						</div>
						<div class="panel-body">
							<table class="table table-hover">
								<tr style="margin-bottom: 10%;" class="success">
									<td class="text-right col-sm-3 col-md-3 col-lg-3"><font style="size: a3;">姓名：</font></td>
									<td><span id="userNameSpan" th:text="${user.name}" ></span></td>
								</tr>
								<tr style="margin-bottom: 10%;" class="success">
									<td class="text-right col-sm-3 col-md-3 col-lg-3">性别：</td>
									<td><span id="userSexSpan" th:text="${user.information.sex}"></span></td>
								</tr>
								<tr style="margin-bottom: 10%;" class="success">
									<td class="text-right col-sm-3 col-md-3 col-lg-3">出生日期：</td>
									<td><span id="userBirthSpan" th:text="${user.information.birthDate}"></span></td>
								</tr>
								<tr style="margin-bottom: 10%;" class="success">
									<td class="text-right col-sm-3 col-md-3 col-lg-3">家庭住址：</td>
									<td><span id="userAddressSpan" th:text="${user.information.address}"></span></td>
								</tr>
								<tr style="margin-bottom: 10%;" class="success">
									<td class="text-right col-sm-3 col-md-3 col-lg-3">联系方式：</td>
									<td><span id="userPhoneSpan" th:text="${user.information.phone}"></span></td>
								</tr>
							</table>
						</div>
						<div class="panel-footer">
							<button type="button" class="btn btn-info" id="updatePassBtn"  tabindex="-1" role="dialog" data-target="#updatePassModal">更换密码</button>
							<button type="button" class="btn btn-info pull-right" id="updateUserInfoBtn" >编辑个人信息</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>

		<!-- addGroupModal -->
		<div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="addGroupModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="addGroupModalLabel">加入群聊</h4>
					</div>
					<div class="modal-body">
						<div class="input-group">
							<span class="input-group-addon" id="">搜索群组名：</span>
							<input  class="form-control" type="text" id="addGroupName" placeholder="请输入想添加的群组名" aria-describedby="basic-addon1">
						</div>
						<div id="addGroupDiv" hidden="hidden">
							<hr>
							<span>点击群组名添加：&nbsp;&nbsp;</span>
							<button class="btn btn-default" type="button" id="addGroup"></button>
							<span id="isGroup"></span>
						</div>
						<div id="errorGroupDiv" hidden="hidden">
							<hr>
							<span ><p style="color: red">&nbsp;&nbsp;群组名不存在，请重新输入</p></span>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="selectGroup" class="btn btn-primary">搜索</button>
					</div>
				</div>
			</div>
		</div>

		<!-- addModal -->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="addModalLabel">添加好友</h4>
					</div>
					<div class="modal-body">
						<div class="input-group">
							<span class="input-group-addon" id="basic-addon1">用户名：</span>
							<input  class="form-control" type="text" id="addName" placeholder="请输入想添加的用户名" aria-describedby="basic-addon1">
						</div>
						<div id="addFriendDiv" hidden="hidden">
							<hr>
							<span>点击好友名添加：&nbsp;&nbsp;</span>
							<button class="btn btn-default" type="button" id="addFriend"></button>
							<span id="isFriend"></span>
						</div>
						<div id="errorDiv" hidden="hidden">
							<hr>
							<span ><p style="color: red">&nbsp;&nbsp;用户名不存在，请重新输入</p></span>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="selectUser" class="btn btn-primary">搜索</button>
					</div>
				</div>
			</div>
		</div>

		<!-- updatePassModal -->
		<div class="modal fade" id="updatePassModal" tabindex="-1" role="dialog" aria-labelledby="updatePassModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="updatePassModalLabel">更换密码</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="updatePassForm" method="post" action="">
							<input type="text" hidden="hidden" name="name" id="updatePassToName" />
							<div class="form-group">
								<label for="oldPassword" class="col-sm-2 control-label">旧密码:</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="oldPassword" placeholder="旧密码">
								</div>
								<span id="oldPasswordSpan" class="col-sm-12"></span>
							</div>
							<div class="form-group">
								<label for="newPassword" class="col-sm-2 control-label">新密码:</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" name="passWord" id="newPassword" placeholder="新密码">
								</div>
								<span id="newPasswordSpan"></span>
							</div>
							<div class="form-group">
								<label for="reNewPassword" class="col-sm-2 control-label">确认密码:</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="reNewPassword" placeholder="确认密码">
								</div>
								<span id="reNewPasswordSpan"></span>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="sureUpdatePass" class="btn btn-primary">确认</button>
					</div>
				</div>
			</div>
		</div>


		<!-- updateUserInfoModal -->
		<div class="modal fade" id="updateUserInfoModal" tabindex="-1" role="dialog" aria-labelledby="updateUserInfoModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="updateUserInfoModalLabel">编辑个人信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="updatePassUserInfo" method="post" action="">
							<div class="form-group">
								<label for="address" class="col-sm-2 control-label">用户名:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="name" placeholder="用户名" disabled>
								</div>
								<span id="nameSpan"></span>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">性别:</label>
								<div class="btn-group" data-toggle="buttons">
									<label id="manLabel" class="btn btn-info">
										<input type="radio" name="sex" id="man" autocomplete="off" >男
									</label>
									<label id="womenLabel" class="btn btn-info">
										<input type="radio" name="sex" id="women" autocomplete="off" >女
									</label>
								</div>
								<span id="sexSpan" class="col-sm-12"></span>
							</div>
							<div class="form-group">
								<label for="birth" class="col-sm-2 control-label">出生日期:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="birth" placeholder="出生日期">
								</div>
								<span id="birthSpan"></span>
							</div>
							<div class="form-group">
								<label for="address" class="col-sm-2 control-label">家庭住址:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="address" placeholder="家庭住址">
								</div>
								<span id="addressSpan"></span>
							</div>
							<div class="form-group">
								<label for="phone" class="col-sm-2 control-label">联系方式:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="phone" placeholder="联系方式">
								</div>
								<span id="phoneSpan"></span>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="sureUpdateUserInfo" class="btn btn-primary">确认</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>